@require nib
@require '~styl/base/palette.styl'

.summary-section
  width 100%
  float left
  background-color white
  margin-bottom 10px
  padding 15px 24px 12px
  border-radius 5px
  border 1px solid rgba(0, 0, 0, .1)
  font-family Lato-Regular

.summary-headline
  margin-bottom 12px

  &__title
    padding 6px 0
    font-size 12px
    font-weight 500
    text-transform uppercase
    letter-spacing 2px
    color $tooltip-color

  &__value
    font-weight 200
    font-size 30px
    color $body-color

.summary-label
  font-family Lato-Bold
  color $body-color
  padding-bottom 12px
  text-align center

.summary-stat
  clearfix()
  padding 10px 0
  line-height 18px

  &__body
    clearfix()

  &__title
    color $body-color
    float left

    // A link is present on at least one summary stat.
    a
      text-decoration none
      color $link-color
      padding-left 6px

  &__value
    float right
    color $body-color
    font-family Lato-Bold

  &__tooltip
    display block
    clear both
    font-size 12px
    color $tooltip-color

  & + &
    border-top 1px solid rgb(242, 242, 242)

  &--number &__value
    color $healthy-color

  &--dead &__value
    color $alert-color
    text-transform capitalize

  &--suspect &__value
    color $warning-color
    text-transform capitalize

  &--healthy &__value
    color $healthy-color
    text-transform capitalize

  &--link &__value
    a
      text-decoration none
      font-family Lato-Regular
      color $link-color

.summary-stat-breakdown
  padding 2px 0

  &--dead
    color $alert-color

  &--suspect
    color $warning-color

  &--healthy
    color $healthy-color

  &__body
    clearfix()

  &__title
    float left
    margin-right 2em

  &__value
    float right
